<template>
    <!-- 查询 -->
    <el-card shadow="never" style="margin-bottom:14px;" :body-style="{ paddingBottom: '2px' }">
        <el-form :inline="true" :model="searchData">
            <el-form-item label="按钮名称" style="width:350px">
                <el-input clearable v-model="searchData.title" placeholder="请输入按钮名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getpermission" type="primary" style="margin-left:-20px;">
                    查询
                </el-button>
            </el-form-item>
        </el-form>
    </el-card>




    <!-- 表格 -->
    <el-card shadow="never">

        <BaseTable :data="tableData.rows" :columns="columns" :total="tableData.total" v-model="pageData">



            <!-- 状态显示插槽 -->
            <template #show="{ row }">
                <el-switch v-model="row.show" active-text="开启" inactive-text="关闭" inline-prompt :active-value="1"
                    :inactive-value="0">

                </el-switch>
            </template>

            <!--操作按钮插槽  -->
            <template #action>
                <el-button type="primary">编辑</el-button>

            </template>
        </BaseTable>
    </el-card>




</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue';
// import {menusof} from '@/api/modules/menus';
import { menusof } from '@/api/modules/menus';
// import { searchparams } from '@/api/modules/menus';
// import { title } from 'process';
import api from '@/api';
//表格列表配置
let columns = [
    {
        label: '按钮名称',
        prop: 'title',
    },
    {
        label: '类型',
        prop: 'type',
    },
    {
        label: '排序',
        prop: 'order',
    },
    {
        label: '显示',
        prop: 'show',
    },
    {
        label: '操作',
        prop: 'action',
    },
]


let tableData = reactive({
    rows: [],
    total: 0
})

let pageData = ref<pagequery>({
    currentPage: 1,
    pageSize: 5
})



//搜索的所有数据
let allclassifydata = ref<menusof[]>([])

let searchData = ref<searchparams>({})


onMounted(() => {
    getpermission();
    getallclassifydata()
})

watch([pageData], () => {
    getpermission();
}, { deep: true })

//  let getpermission=async()=>{
//    let res=await api.menus.search(pageData.value);
//    if(res.code==200){
// console.log(res.data.rows);
// tableData.rows=res.data.rows;
// tableData.total=res.data.total;
//    }
// }

let getpermission = () => {
    api.menus.search({
        ...pageData.value,
        ...searchData.value
    })
        .then(res => {
            if (res.code == 200) {
                tableData.rows = res.data.rows;
                tableData.total = res.data.total;
            }
        })
}


let getallclassifydata = () => {
    api.menus.search()
        .then(res => {
            console.log(res);
            if (res.code = 200) {
                allclassifydata.value = res.data.rows
            }
        })
}







</script>

<style scoped></style>